<!-- 轮播图 -->
<template>
  <div class="carousel" @mouseover="handleClearInterval" @mouseleave="handleAutoPlay">
    <div class="inner">
      <!-- 内容区域 -->
      <slot></slot>
    </div>
    <template v-if="hasDirection">
      <!-- 左右两侧按钮 -->
      <div class="left-arrow" @click="handleClickArrow(DIR.PREV)">&lt;</div>
      <div class="right-arrow" @click="handleClickArrow(DIR.NEXT)">&gt;</div>
    </template>

    <!-- 轮播图 指示点 -->
    <div class="dot-info" v-if="hasDot">
      <div class="item" :class="{ 'item--active': index === currentIndex }" v-for="(item, index) in itemLength"
        :key="index" @click="handleClickDot(index)"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue';
import { DIR } from './constant';
import { carouselProps } from './props';
const { initial, duration, autoPlay, hasDot, hasDirection } = defineProps(carouselProps);

/* 当前显示的轮播图索引 */
const currentIndex = ref(initial);
/* 轮播图的数量 */
const itemLength = ref(0);
/* 当前组件的实例this */
const instance = getCurrentInstance();
/* 动画的名称 */
const transitionName = ref(DIR.NEXT);
/* 定时器ID */
let timer = null;

/* 处理自动播放 */
const handleAutoPlay = () => {
  if (autoPlay) {
    timer = setInterval(() => {
      /* 需要初始化 */
      transitionName.value = DIR.NEXT;
      setCurrentIndex(transitionName.value);
    }, duration);
  }
};

/* 设置当前的值 */
const setCurrentIndex = (dir) => {
  if (dir === DIR.NEXT) {
    currentIndex.value++;
    if (currentIndex.value === itemLength.value) {
      currentIndex.value = 0;
    }
  } else if (dir === DIR.PREV) {
    currentIndex.value--;
    if (currentIndex.value < 0) {
      currentIndex.value = itemLength.value - 1;
    }
  }
}

/* 箭头点击事件 */
const handleClickArrow = (dir) => {
  transitionName.value = dir;
  clearInterval(timer);
  setCurrentIndex(dir);
  handleAutoPlay();
}

/* 点击圆点事件 */
const handleClickDot = (index) => {
  /* 判断动画方向 */
  if (index > currentIndex.value) {
    transitionName.value = DIR.NEXT;
  } else {
    transitionName.value = DIR.PREV;
  }
  currentIndex.value = index;
  /* 后续需要重置动画 */
  clearInterval(timer);
  handleAutoPlay();
}

onMounted(() => {
  /* 获取轮播图数量 */
  itemLength.value = instance.slots.default()[0].children.length;
  handleAutoPlay();
})
onUnmounted(() => {
  handleClearInterval();
})
/* 清除定时器 */
function handleClearInterval () {
  clearInterval(timer);
  timer = null;
}


</script>

<style lang='scss' scoped>
/* Your component styles here */
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;

  .inner {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .left-arrow,
  .right-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;

    background-color: rgb(238, 238, 238, .5);
    color: #fff;
    opacity: 0;
    transition: opacity .3s;

  }

  .left-arrow {
    left: 0;
    border-radius: 0 20px 20px 0;
  }

  .right-arrow {
    right: 0;
    border-radius: 20px 0 0 20px;
  }

  &:hover {

    .left-arrow,
    .right-arrow {
      opacity: 1;
    }
  }

  /* 底部圆点 */
  .dot-info {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;

    .item {
      width: 6px;
      height: 6px;
      border-radius: 100%;
      border: 1px solid rgba(0, 0, 0, .1);
      background-color: hsla(0, 0%, 100%, .6);
    }

    .item+.item {
      margin-left: 10px;
    }

    .item--active {
      background-color: #ff5000;
    }

  }
}
</style>